const oTbody = document.querySelector('tbody');
const oIntName = document.querySelector('#name');
const oIntTele = document.querySelector('#telephone');
const oIntSch = document.querySelector('#school');
const oIntnAge = document.querySelector('#age');
const oIntSala = document.querySelector('#salary');
const oBtnDel = document.querySelector('[name="del"]');
const oBtnAlter = document.querySelector('[name="alter"]');
const oDivBg = document.querySelector('.bg');
const oBtnClo = document.querySelector('.close');
const oBtnPr1 = document.querySelector('.preserve1');
const oBtnPr2 = document.querySelector('.preserve2');
const oBtnRes = document.querySelector('.reset');


const oIntName1 = document.querySelector('#name1');
const oIntTele1 = document.querySelector('#telephone1');
const oIntSch1 = document.querySelector('#school1');
const oIntnAge1 = document.querySelector('#age1');
const oIntSala1 = document.querySelector('#salary1');




let arr = [
    { name: 'Steven.jobs', telephone: 1371364084, school: '大学辍学', age: 45, salary: '$2300000' },
    { name: 'ZuckerBerg', telephone: 1371364084, school: '哈佛大学博士', age: 45, salary: '$99000000' },
    { name: 'Bill.Gates', telephone: 1371364084, school: '大学辍学', age: 45, salary: '$2300000' }
];

tab();



window.localStorage.setItem( 'cart' , arr );
window.localStorage.arr = JSON.stringify( arr ) ;
console.log(window.localStorage.arr);

function tab() {
    let cart = JSON.parse(window.localStorage.arr);
    let str = '';
    str += `<tr>`;
    arr.forEach(function (item, index) {
        str += `<tr>
                <td>${item.name}</td>
                <td>${item.telephone}</td>
                <td>${item.school}</td>
                <td>${item.age}</td>
                <td>${item.salary}</td>
                <td><button class='alter' name='alter' index = ${index} >修改</button></td>
                <td><button class='del' name='del' index = ${index} >删除</button></td>
                </tr>`
    })
    str += '</tr>';
    if (arr.length === 0) {
        str += `<tr><td colspan = 7>没了没了！</td></tr>`;
    }
    oTbody.innerHTML = str;
}

let index;
oTbody.addEventListener('click', function (event) {
    if (event.target.getAttribute('name') === 'alter') {
        oDivBg.style.display = 'block';
        index =Number( event.target.getAttribute('index') );
    }


    if (event.target.getAttribute('name') === 'del') {
        arr.splice(Number(event.target.getAttribute('index')), 1);
        console.log(Number(event.target.getAttribute('index')));
        tab();
    }
})
oBtnClo.addEventListener('click', function () {
    oDivBg.style.display = 'none';

})

let nameVal;
let teleVal;
let schVal;
let ageVal;
let salaVal;
let nameVal1;
let teleVal1;
let schVal1;
let ageVal1;
let salaVal1;


oBtnPr1.addEventListener('click', function () {

    nameVal = oIntName.value;
    teleVal = oIntTele.value;
    schVal = oIntSch.value;
    ageVal = oIntnAge.value;
    salaVal = oIntSala.value;


    arr.push({ name: `${nameVal}`, telephone: teleVal, school: schVal, age: ageVal, salary: '$' + salaVal })
    tab();

})
tab();

oBtnRes.addEventListener('click', function () {
    oIntName.value = '';
    oIntTele.value = '';
    oIntSch.value = '';
    oIntnAge.value = '';
    oIntSala.value = '';
})


oBtnPr2.addEventListener( 'click' ,function(){
    nameVal1 = oIntName1.value;
    teleVal1 = oIntTele1.value;
    schVal1 = oIntSch1.value;
    ageVal1 = oIntnAge1.value;
    salaVal1 = oIntSala1.value;


    // arr[index[{ name: `${nameVal1}`, telephone: teleVal1, school: schVal1, age: ageVal1, salary: '$' + salaVal1 }]];

    arr[index]['name']=nameVal1;

    arr[index]['telephone']=teleVal1;

    arr[index]['school']=schVal1;

    arr[index]['age']=ageVal1;

    arr[index]['salary']='$'+salaVal1;
    tab();
    oDivBg.style.display = 'none';
} )
tab;